<template>
	<view class="confirmOrder">
		<uninavbar title="开具发票" leftIcon='leftIcon' rightIcon='' rightText="" />
		<view class="paymentTitle">
			支付方式
		</view>
		<view class="paymentList">
			<view class="paymentDom">
				<view class="paymentName">
					抬头类型
				</view>
				<view class="lookup" v-for="(item,index ) in lookupList" @tap="payment(index)">
					{{item.name}}
					<view class="paymentHide" v-if="!item.paymentShow">
					</view>
					<view class="paymentShow" v-else>
						<image src="/static/images/productDetails/show.png" mode=""></image>
					</view>
				</view>
			</view>

		</view>

		<view class="paymentList">

			<view class="paymentDom">
				<view class="paymentName">
					发票抬头
				</view>
				<view class="">
					<input class="invoice" type="text" placeholder="抬头名称">


				</view>
			</view>
			<view class="paymentDom">
				<view class="paymentName">
					税号
				</view>
				<view class="">
					<input class="invoice" type="text" placeholder="纳税人识别号或社会统一征信代码">

					<!-- <view class="paymentHide" >
		
				</view> -->
					<!-- 	<view class="paymentShow" v-else>
					<image src="/static/images/productDetails/show.png" mode=""></image>
				</view> -->
				</view>
			</view>
			<view class="paymentDom">
				<view class="paymentName">
					邮箱
				</view>
				<view class="">
					<input class="invoice" type="text" placeholder="选填">

					<!-- <view class="paymentHide" >
			
					</view> -->
					<!-- 	<view class="paymentShow" v-else>
						<image src="/static/images/productDetails/show.png" mode=""></image>
					</view> -->
				</view>
			</view>

			<view class="paymentDom">
				<view class="paymentName">
					企业地址
				</view>
				<view class="">
					<input class="invoice" type="text" placeholder="选填">

					<!-- <view class="paymentHide" >
	
			</view> -->
					<!-- 	<view class="paymentShow" v-else>
				<image src="/static/images/productDetails/show.png" mode=""></image>
			</view> -->
				</view>
			</view>

			<view class="paymentDom">
				<view class="paymentName">
					企业电话
				</view>
				<view class="">
					<input class="invoice" type="text" placeholder="选填">

					<!-- <view class="paymentHide" >
	
			</view> -->
					<!-- 	<view class="paymentShow" v-else>
				<image src="/static/images/productDetails/show.png" mode=""></image>
			</view> -->
				</view>
			</view>
		</view>
		<view class="paymentList">
			<view class="paymentDom">
				<view class="paymentName">
					设为默认
				</view>
				<view class="lookup"  @tap="defaultType=!defaultType">

					<view class="paymentHide" v-if="!defaultType">
					</view>
					<view class="paymentShow" v-else>
						<image src="/static/images/productDetails/show.png" mode=""></image>
					</view>
				</view>
			</view>

		</view>
		<view class="paymentfiex">
			<view class="paymentBtn">
				完成
			</view>
		</view>

	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		components: {
			uninavbar,
		},
		data() {
			return {
				defaultType:false,
				lookupList: [{
					name: '个人或事业单位',
					id: '1',
					paymentShow: true,
					img: require('../static/images/productDetails/zfb.png')
				}, {
					name: '企业',
					id: '2',
					paymentShow: false,
					img: require('../static/images/productDetails/wx.png')
				}],

			}
		},
		methods: {
			payment(index) {
				for (let item of this.lookupList) {
					item.paymentShow = false
				}
				this.lookupList[index].paymentShow = true
			}
		}
	}
</script>

<style scoped lang="scss">
	.confirmOrder {
		padding: 40rpx;
	}


	.paymentTitle {
		color: #666666;
	}

	.paymentList {
		border-radius: 32rpx;
		background-color: #fff;
		padding: 30rpx;
		margin-top: 20rpx;
		color: #666666;

		.paymentDom {
			padding: 20rpx 0;
			border-bottom: 2rpx solid rgba(221, 221, 221, 0.87);
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.paymentName {
				display: flex;
				align-items: center;

				image {
					width: 45rpx;
					height: 45rpx;
					margin-right: 20rpx;
				}

			}

			.invoice {
				font-size: 24rpx;
				text-align: right;
			}

			.lookup {
				display: flex;
				align-items: center;
			}

			.paymentHide,
			.paymentShow {
				width: 30rpx;
				height: 30rpx;
				border: 1px solid #D9D9D9;
				border-radius: 50%;
				margin-left: 20rpx;
			}

			.paymentShow {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		.paymentDom:last-child {
			border-bottom: none;

		}
	}

	.paymentfiex {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 40rpx 0;
		width: 100%;

		.paymentBtn {
			width: 580rpx;
			height: 80rpx;
			background: #6954D5;
			border-radius: 40rpx;
			color: #fff;
			text-align: center;
			margin: auto;
			line-height: 80rpx;
		}
	}
</style>